<template>
	<div class="t-main" v-loading="loading">
		<el-scrollbar max-height="60vh">
			<ul class="nav-list">
				<li
					class="nav-item"
					:class="{ active: item.value === checkType }"
					v-for="item in typeList"
					:key="item.value"
					@click="handleCheckType(item.value)"
				>
					<el-badge :value="getTypeNumber(item.value)" class="item" style="width: 90%" type="success" :show-zero="false">
						<p>{{ item.label }}</p>
					</el-badge>
				</li>
			</ul>
		</el-scrollbar>
		<section class="t-content mt10">
			<div class="fc">
				<el-radio-group v-model="mealType" size="small" @change="getInitData">
					<!-- <el-radio-button label="全部" value="" /> -->
					<el-radio-button label="早餐" value="1" />
					<el-radio-button label="午餐" value="2" />
					<el-radio-button label="晚餐" value="3" />
				</el-radio-group>
			</div>
			<!-- <div class="search">
				<el-input v-model="searchKey" clearable placeholder="请输入内容"></el-input>
				<el-button type="primary" @click="handleSearch">
					<el-icon>
						<icon-search theme="outline" size="24" />
					</el-icon>
					搜索
				</el-button>
			</div> -->

			<el-scrollbar max-height="60vh" v-if="dataObjList[checkType]?.length > 0">
				<ul class="nav-card-list">
					<li class="nav-card-item" v-for="item in dataObjList[checkType]" :key="item.id">
						<FileList
							fit="fill"
							:src="item.pic"
							style="width: 100%; height: 115px; border-top-left-radius: 10px; border-top-right-radius: 10px"
							:single="true"
						></FileList>
						<div class="item-content flex1">
							<div class="text-bold flex align-center">
								<el-icon class="mr8">
									<icon-check-one v-if="item.count > 0" theme="outline" size="26" fill="#0052D9" />
									<icon-round v-else theme="outline" size="26" />
								</el-icon>
								<p v-if="item.packageName">
									{{ item.packageName }}<span class="f14 text-gray">({{ item.dishName || item.dishsName }})</span>
								</p>
								<p v-else>{{ item.dishName || item.dishsName }}</p>
							</div>

							<div class="f-between">
								<p class="text-value">
									￥<span>{{ item.price }}</span
									><span class="text-gray f14">/{{ item.quantifier }}</span>
								</p>
								<el-input-number size="small" style="width: 80px" :min="0" :max="1000" v-model="item.count" @change="handleCheck(item)" />
							</div>
						</div>
					</li>
				</ul>
			</el-scrollbar>
			<el-empty v-else :image-size="200" />
		</section>
	</div>
</template>

<script setup lang="ts">
import FileList from '@/views/aplid/DetailPage/ContentListItem/FileList/PreviewImg/index.vue'
import apiMod from '@/apiMod/index'

const props = defineProps<{
	dish_type_data: any
	modelValue?: any
	orderTime?: any
}>()

const emit = defineEmits(['update:modelValue', 'update:itemType'])
const mealType = ref('1')
const loading = ref(false)
const checkedList = ref([])
const searchKey = ref('')
const checkType = ref('-99')
const dataObjList = ref({})
let menuDataList = []
const typeList = computed(() => {
	return [
		{
			label: '套餐',
			value: '-99',
		},
		...props.dish_type_data,
	]
})

const cleanChecked = () => {
	checkedList.value = []
	searchKey.value = ''
}

const getTypeNumber = (type) => {
  if(!dataObjList.value[type]) return 0
	const num = dataObjList.value[type].filter((item) => item.count >0)
	return num.length
}

const handleCheck = (item) => {
	let itemList = []
	Object.values(dataObjList.value).map((data: any) => {
		if (data) {
			data.map((item) => {
				if (item.count) {
					const tempObj = {
						count: item.count,
						itemId: item.id,
						itemName: item.packageName || item.dishName || item.dishsName,
						itemType: item.itemType,
						pic: item.pic,
						price: item.price,
						totalPrice: item.price * item.count,
					}
					itemList.push(tempObj)
				}
			})
		}
	})
	emit('update:modelValue', itemList)
}

const handleCheckType = (value) => {
	loading.value = true
	checkType.value = value
	searchKey.value = ''
	handleSearch()
}

const handleSearch = () => {
	if (checkType.value == '-99') {
		dataObjList.value[checkType.value] = menuDataList.filter((item) => item.itemType == 1)
	} else {
		dataObjList.value[checkType.value] = menuDataList.filter((item) => item.dishType == checkType.value)
	}
	loading.value = false
}

const getInitData = () => {
	if (!props.orderTime) return
	loading.value = true
	apiMod
		.view_omMenu_page({
			menuDate: props.orderTime.split(' ')[0],
			menuType: mealType.value,
		})
		.then((res) => {
			loading.value = false
			const data = res.data ? Object.values(res.data) : []
			let menuData: any = []
			data.forEach((item: any) => {
				if (item.packageList) {
					menuData = [
						...menuData,
						...item.packageList.map((item) => {
							item.itemType = 1
							return item
						}),
					]
				}
				if (item.dishList) {
					menuData = [
						...menuData,
						...item.dishList.map((item) => {
							item.itemType = 0
							return item
						}),
					]
				}
			})
			menuDataList = menuData
			handleSearch()
		})
		.catch(() => {
			loading.value = false
		})

	checkedList.value = props.modelValue || []
	if (!props.dish_type_data) return
}

watch(
	() => props.orderTime,
	() => {
		getInitData()
	},
	{
		immediate: true,
	}
)
onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
:deep(.el-input__inner) {
	text-align: center !important;
}

.t-main {
	display: flex;
	padding: 10px;
	gap: 20px;
	.text-value {
		font-family: 'Microsoft YaHei Bold';
		font-weight: 700;
		font-size: 20px;
		text-align: left;
		color: #0052d9;
	}
	.nav-list {
		display: flex;
		flex-flow: column;
		gap: 8px;
		background-color: #fff;
		padding: 10px;
		border-right: 1px solid #eee;
		.nav-item {
			background-color: #f5f5f569;
			line-height: 32px;
			border-radius: 5px;
			padding-left: 30px;
			&:hover {
				cursor: pointer;
			}
		}
		.active {
			color: #0075fc;
			font-weight: bold;
			width: 223px;
			background: rgba(0, 82, 217, 0.1);

			font-family: 'Microsoft YaHei';
			font-weight: 400;
			font-size: 14px;
			color: #0052d9;
		}
	}
	.nav-item-active {
		border: 1px solid #0075fc !important;
	}
	.nav-card-list {
		display: flex;
		flex-flow: row wrap;
		gap: 8px;
		background-color: #fff;
		margin-top: 10px;
		border-radius: 10px;
		.nav-card-item {
			width: calc(100% / 3 - 10px);
			line-height: 40px;
			border-radius: 10px;
			border: 1px solid #0052d9;
			border-top: none;
			position: relative;
			&:hover {
				cursor: pointer;
			}
			.item-content {
				border-top: none;
				padding: 10px;
				display: flex;
				flex-flow: column;
				justify-content: space-around;
			}
		}
	}

	.t-content {
		flex: 1;
		.search {
			display: flex;
			align-items: center;
			gap: 10px;
		}
	}
}
</style>
